<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8" style="margin-top: 20px;">

      <!-- 大头像卡片 -->
      <el-card class="box-card" shadow="hover">
        <div class="user">
          <img :src="avatarUrl" alt="avatar" @dragstart.prevent/>
          <div class="user-info">
            <p class="name">Admin</p>
            <p class="authority">超级管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>上次登录时间：<span>2023-3-6</span></p>
          <p>上次登录地点：<span>上海</span></p>
        </div>
      </el-card>

      <!-- 表格卡片 -->
      <el-card shadow="hover" style="margin-top: 20px; height: 450px;">
        <el-table :data="tableData" style="width: 100%">
          <!-- 表格列 -->
          <el-table-column v-for="(val, key) in tableLabel" :prop="key" :label="val" :key="key" />
        </el-table>
      </el-card>

    </el-col>
    <el-col :span="16" style="margin-top: 20px;">

      <div class="nums">
        <!-- 六个小卡片 -->
        <el-card v-for="item in countData" :key="item.name" :body-style="{ display: 'flex', padding: 0 }" shadow="hover">
          <el-icon class="icon" :style="{ background: item.color }">
            <component :is="item.icon" :style="{ width: 33, height: 33 }"></component>
          </el-icon>
          <div class="detail">
            <p class="num">￥{{ item.value }}</p>
            <p class="txt">{{ item.name }}</p>
          </div>
        </el-card>
      </div>

      <!-- 折线卡片 -->
      <el-card style="height: 280px;" shadow="hover">
        <div ref="echart" style="height: 280px;"></div>
      </el-card>

    </el-col>
  </el-row>
</template>


<script setup>
import { onMounted, reactive, ref, getCurrentInstance } from 'vue'
import { useStore } from "vuex";
import img_url_pre from '../../utils/img_url_filter'

let tableData = ref([]);
let avatarUrl = ref('');
const tableLabel = {};
const { proxy } = getCurrentInstance();
const store = useStore();
let countData = [
  {
    name: "今日支付订单",
    value: 1234,
    icon: "SuccessFilled",
    color: "#2ec7c9",
  },
  {
    name: "今日收藏订单",
    value: 210,
    icon: "Star",
    color: "#ffb980",
  },
  {
    name: "今日未支付订单",
    value: 1234,
    icon: "GoodsFilled",
    color: "#5ab1ef",
  },
  {
    name: "本月支付订单",
    value: 1234,
    icon: "SuccessFilled",
    color: "#2ec7c9",
  },
  {
    name: "本月收藏订单",
    value: 210,
    icon: "Star",
    color: "#ffb980",
  },
  {
    name: "本月未支付订单",
    value: 1234,
    icon: "GoodsFilled",
    color: "#5ab1ef",
  },
];

let getImgSrc = () => {
  proxy.$api.user.getUser(store.state.user.userId).then(ret => {
    if (ret.data.picture)
      avatarUrl.value = img_url_pre(ret.data.picture);
    else
      avatarUrl.value = new URL("../../assets/images/user_default.png", import.meta.url).href;
  }).catch(error => {
    console.log(error);
    avatarUrl.value = new URL("../../assets/images/user_default.png", import.meta.url).href;
  });
};

// request

onMounted(() => {
  getImgSrc();
});

// 关于echarts的渲染部分
let xOptions = reactive({
  // 图例文字颜色
  textStyle: {
    color: "#333",
  },
  grid: {
    left: "20%",
  },
  // 提示框
  tooltip: {
    trigger: "axis",
  },
  xAxis: {
    type: "category", // 类目轴
    data: [],
    axisLine: {
      lineStyle: {
        color: "#17b3a3",
      },
    },
    axisLabel: {
      interval: 0,
      color: "#333",
    },
  },
  yAxis: [
    {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#17b3a3",
        },
      },
    },
  ],
  color: ["#2ec7c9", "#b6a2d3", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
  series: [],
});
let pieOptions = reactive({
  tooltip: {
    trigger: "item",
  },
  color: [
    "#0f78f4",
    "#dd536b",
    "#9462e5",
    "#a6a6a6",
    "#e1bb22",
    "#39c362",
    "#3ed1cf",
  ],
  series: [],
})
let orderData = reactive({
  xData: [],
  series: [],
});
let userData = reactive({
  xData: [],
  series: [],
});
let videoData = reactive({
  series: [],
});
</script>


<style lang="less" scoped>
.el-card:hover {
  transform: scale(1.015);
  box-shadow: 0 0 16px rgba(113, 138, 187, 0.523);
  border-color: #eee;
  // transition: all 0.2s ease-in-out;
}

// 大头像卡片
.user {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 2px solid #ccc;
  display: flex;
  align-items: center;

  img {
    margin-right: 25px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
  }

  .user-info {
    .name {
      font-size: 32px;
      margin-bottom: 20px;
    }

    .authority {
      color: #999999;
    }
  }
}

// 登录信息
.login-info {
  p {
    line-height: 28px;
    font-size: 14px;
    color: #999999;

    span {
      color: #666666;
      margin-left: 60px;
    }
  }
}

// 六个小卡片
.nums {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .icon {
    width: 80px;
    height: 80px;
    color: #fff;
  }

  .detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 15px;

    .num {
      font-size: 30px;
      margin-bottom: 10px;
      line-height: 30px;
    }

    .txt {
      font-size: 14px;
      color: #999;
      text-align: center;
    }
  }

  .el-card {
    width: 32%;
    margin-bottom: 20px;
    padding: 0;
  }


}
</style>